<template>
	<view class="an-body an-user a_vfs">
		<view class="an-top-bg" style="background: linear-gradient(to bottom right, rgba(0, 122, 255, 0.49), rgba(0, 122, 255, 0.5215686274509804));">
			<!-- 用户信息  -->
			<view class="an-userInfo">
				<view class="an-user-image"><image style="width: 60px; height: 60px; background-color: #eeeeee;" mode="aspectFit" :src="userSrc" @error="imageError"></image></view>
				<view class="an-user-text">
					<!-- <view>
						<h3>{{userInfo.name}}</h3>
						<p>{{userInfo.email}}</p>
					</view> -->

					<view>
						<h3>{{user_name}}</h3>
						<p>{{company}}</p>
					</view>
				</view>
			</view>
		</view>

		<view class="an-radius-body">
			<!-- <view class="an-quick">
				<view class="an-ico-item" v-for="item in grids" :key="item.id" @tap="clickBtn(item.id)">
					<view class="an-ico-img" :class="item.color"><span class='iconfont' :class="item.ico"></span></view>
				    <text class="an-ico-text">{{item.text}}</text>
				</view>
			</view> -->

			<view class="an-list">
				<view class="uni-list">
					<view class="uni-list-cell-divider">我是受访人</view>

					<view class="an-quick">
						<view class="an-ico-item" @tap="clickBtn(1)">
							<view class="an-ico-img color1"><span class="iconfont  icon-icon-test3"></span></view>
							<text class="an-ico-text">邀请来访</text>
						</view>

						<view class="an-ico-item" @tap="clickBtn(2)">
							<view class="an-ico-img color2"><span class="iconfont  icon-icon-test7"></span></view>
							<text class="an-ico-text">来访记录</text>
						</view>

						<view class="an-ico-item" @tap="clickBtn(3)">
							<view class="an-ico-img color3"><span class="iconfont  icon-wode"></span></view>
							<text class="an-ico-text">访客管理</text>
						</view>

						<view class="an-ico-item" @tap="clickBtn(item.id)">
							<view class="an-ico-img color1"><span class="iconfont  icon-icon-test4"></span></view>
							<text class="an-ico-text">培训管理</text>
						</view>
					</view>

					<view class="an-quick" style="text-align: left;">
						<view class="an-ico-item" @tap="clickBtn(item.id)">
							<view class="an-ico-img color4"><span class="iconfont  icon-icon-test5"></span></view>
							<text class="an-ico-text">部门管理</text>
						</view>
					</view>
					
					<view style="width: 100%;height: 10px;background: #f7f7f7;"></view>
					
					<view class="uni-list-cell-divider">我是访客</view>

	                <view class="an-quick" style="text-align: left;">
						<view class="an-ico-item" @tap="clickBtn(6)">
							<view class="an-ico-img color3"><span class="iconfont  icon-icon-test6"></span></view>
							<text class="an-ico-text">我的预约</text>
						</view>
					</view>
					
					<view style="width: 100%;height: 10px;background: #f7f7f7;"></view>
					
                    
					<view class="uni-list-cell-divider">公共信息</view>
					
					<view class="an-quick" style="text-align: left;">
						<view class="an-ico-item" @tap="clickBtn(item.id)">
							<view class="an-ico-img color4"><span class="iconfont  icon-wode"></span></view>
							<text class="an-ico-text">个人信息</text>
						</view>
					</view>
                  
				
				  
					<!-- <view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="editPwd">
						<view class="uni-list-cell-navigate uni-navigate-right">
							<view class="an-ico color1"><span class="iconfont icon-xiugaimima"></span></view>
							<view>修改密码</view>
						</view>
					</view>
					<view class="uni-list-cell" hover-class="uni-list-cell-hover">
						<view class="an-none-arrow uni-list-cell-navigate uni-navigate-right">
							<view class="an-ico color2"><span class="iconfont icon-icon-test1"></span></view>
							<view>版本号</view>
							<view class="an-right">V1.0</view>
						</view>
					</view> -->
					<view class="uni-list-cell uni-list-cell-last" hover-class="uni-list-cell-hover" @tap="bindLogout">
						<view class="uni-list-cell-navigate uni-navigate-right">
							<view class="an-ico color3"><span class="iconfont icon-tuichu"></span></view>
							<view>退出登录</view>
						</view>
					</view>
					
					  <view style="width: 100%;height: 50px;"></view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { hostRoot,img } from '@/common/util.js';
import request from '../../common/vmeitime-http/requstx.js' //引进requst方法
import defaultImg from '@/static/img/userImg.jpg';
const icoList = [
	{
		id: 1,
		ico: 'icon-icon-test7',
		text: '文章管理',
		color: 'color1'
	},
	{
		id: 2,
		ico: 'icon-icon-test3',
		text: '留言管理',
		color: 'color2'
	},
	{
		id: 3,
		ico: 'icon-icon-test6',
		text: '打卡管理',
		color: 'color3'
	},
	{
		id: 4,
		ico: 'icon-wode',
		text: '用户管理',
		color: 'color4'
	}
];
export default {
	computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userInfo'])
	},
	data() {
		return {
			userSrc:'',
			grids: [],
			user_name:'',
			company:''
		};
	},
	onLoad() {
		uni.getStorage({
		    key: 'headimgurl',
		    success: (res) => {
		        console.log(res.data);
				this.userSrc = res.data;
				console.log(this.userSrc);
		    }
		});
	},
	onShow() {
		
		request({
			url: "user/info",
			method: 'GET',
			data: {
				username:''
		
			},
			success: (res) => {
		
		
		// uni.showToast({
		// 	title: res.data.message,
		// 	icon: 'none',
		// 	duration: 2000
		// });
		
				this.user_name=res.data.data.name;
				this.gongsi=res.data.data.companyid;
				this.usetou=res.data.data.imgurl;
				
				if(res.data.message=='token已过期'){
					uni.showModal({
						title: '未登录',
						content: this.message,
					    showCancel: this.forcedLogin,
						success: (res) => {
							if (res.confirm) {
					
								window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan'
					
					
					
							}
						}
					});
				}
				else if(res.data.message=='token不存在'){
					uni.showModal({
						title: '未登录',
						content: this.message,
					    showCancel: this.forcedLogin,
						success: (res) => {
							if (res.confirm) {
					
								window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan'
					
					
					
							}
						}
					});
				}
		
			}
		})
		
		
		
		
		
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		this.grids = [];
		if (!this.hasLogin) {
			this.bindLogin();
		} else if (this.userInfo.grade == 2 || this.userInfo.grade == 3) {
			this.grids = icoList;
		} else {
			this.grids.push(icoList[0]);
			this.grids.push(icoList[1]);
		}
	},
	methods: {
		...mapMutations(['logout']),
		clickBtn(id) {
			let url = '';
			switch (id) {
				case 1:
					url = '../yaoqing/yaoqing';
					break;
				case 2:
					url = '../yuyuejilu/yuyuejilu';
					break;
				case 3:
					url = '../comster/comster';
					break;
				case 4:
					url = '../user/userList';
					break;
				case 6:
					url = '../myyuyue/myyuyue';
					break;
				default:
					url = '../main/main';
			}
			uni.navigateTo({
				url: url
			});
		},
		editPwd() {
			// 修改密码
			uni.navigateTo({
				url: '../pwd/pwd'
			});
		},
		bindLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		bindLogout() {
			this.logout();
			uni.reLaunch({
				url: '../login/login'
			});
		},
		imageError(e) {
			this.userSrc = defaultImg;
		}
	}
};
</script>

<style lang="scss">
.an-user {
	.an-quick {
		display: flex;
		flex-direction: row;

		padding: 15px 15px;
		.an-ico-item {
			width: 25%;
			text-align: center;
			.an-ico-img {
				text-align: center;
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				border-radius: 50%;
				color: #ffffff;
				.iconfont {
					font-size: 21px;
				}
				&.color1 {
					//background-color: #e9f4fd;
					background: linear-gradient(#bb51fb, #883ffe);
				}
				&.color2 {
					background: linear-gradient(#f9ac8e, #ec5e5c);
				}
				&.color3 {
					background: linear-gradient(#78f5b1, #34ce78);
				}
				&.color4 {
					background: linear-gradient(#68aefb, #007aff);
				}
			}
		}
	}
	.an-list {
		.an-ico {
			margin-right: 10px;
			.iconfont {
				font-size: 21px;
			}
			&.color1 {
				color: #ec5e5c;
			}
			&.color2 {
				color: #883ffe;
			}
			&.color3 {
				color: #34ce78;
			}
			&.color4 {
				color: #007aff;
			}
		}
	}
}
.uni-list-cell-divider{
	    background-color: white;
}
</style>
